<template>
	<view>
		<u-subsection :list="list" :current="curNow" fontSize="16" activeColor="#1ABC9C" @change="sectionChange" class="subsection"></u-subsection>
		
		<view class="noCoupons" v-if="curNow!=0">
			<view v-if="noCoupon.length==0">没有可用的优惠券</view>
			<view class="nocoupon" v-else  v-for="(noo,index) in noCoupon" :key="index">
				<view class="Usercoupons">
					<view class="couponName">{{noo.couponName}}</view>
					<view class="couponEndDate">到期时间：{{noo.endDate}}</view>
				</view>  
			</view>
		</view>
		<view class="yesCoupons" v-else>
			<view v-if="yesCoupon.length==0">
				<text>暂无可用的优惠券</text>
			</view>
			<view class="yescoupon" v-else  v-for="(yess,index) in yesCoupon" :key="index">
				<view class="Usercoupons">
					<view class="couponName">{{yess.couponName}}</view>
					<view class="couponEndDate">到期时间：{{yess.endDate}}</view>
				</view>
				<view class="couponsCheck">
					<u-checkbox-group placement="column">
						<u-checkbox
							:customStyle="{marginBottom:'8px'}"
							activeColor="#1BBC9B"
							:checked=yess.checked
							@change="changeCheck(yess,index)"
						></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="box-floot">
			<u-tabbar>	
				<u-button color="#1BBC9B" class="yesBtn" @click="yesBtn">确定</u-button>
				<u-button color="#1BBC9B" class="noBtn" @click="noBtn">取消</u-button>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import {selectJsCouponYesOrNo} from "@/static/http/getData.js"
	
	export default{
		data(){
			return{
				curNow:0,
				//价钱
				courseNprice:0.0,
				list:['可用优惠券','不可用优惠券'],
				//可用优惠券
				yesCoupon:[],
				//不可用优惠券
				noCoupon:[]
			}
		},
		onLoad(option){
			this.courseNprice = option.courseNprice;
			this.selectJsCouponYesOrNo();
		},
		methods:{
			//监听分段器（课程目录 - 评论区）
			sectionChange(index){
				this.curNow=index;
				selectJsCouponYesOrNo();
			},
			//查看当前用户的可用优惠券和不可用优惠券
			selectJsCouponYesOrNo(){
				var endDate = new Date();
				endDate = this.getTime(endDate);
				var data1 = {
					userId:89,
					state:3,
					endDatee:endDate,
					type:3,
					typee:4,
					online:2
				};
				selectJsCouponYesOrNo(data1).then(res=>{
					var coupon = res.data.data;
					for (var i = 0; i < coupon.length; i++) {
						if(coupon[i].couponMoney>this.courseNprice){
							this.noCoupon.push(coupon[i]);
						}else{
							this.yesCoupon.push(coupon[i]);
						}
					}
				})
			},
			//监听复选框
			changeCheck(e,index){
				if(this.yesCoupon[index].checked==true){
					this.yesCoupon[index].checked = false;
				}else{
					for (var i = 0; i < this.yesCoupon.length; i++) {
						this.yesCoupon[i].checked=false;
					};
					this.yesCoupon[index].checked=true;
				}
			},
			//确定选择优惠券
			yesBtn(){
				var count = 0;
				var data1 = {
					couponId:0,
					couponName:"",
					couponMoney:0.0
				}
				for (var i = 0; i < this.yesCoupon.length; i++) {
					if(this.yesCoupon[i].checked==true){
						count+=1;
						data1.couponId=this.yesCoupon[i].couponId,
						data1.couponName=this.yesCoupon[i].couponName,
						data1.couponMoney=this.yesCoupon[i].couponMoney
					}
				}
				if(count!=0&&count>0){
					localStorage.setItem('userCoupons',JSON.stringify(data1));
					this.$router.back();
				}else{
					this.$router.back();
				}
			},
			//取消选择优惠券
			noBtn(){
				this.$router.back();
			},
			//顶部时间
			getTime(date){
			    var year = date.getFullYear(); //获取完整的年份(4位,1970-????)
			    var month = date.getMonth()+1; //获取当前月份(0-11,0代表1月)
			    var today = date.getDate(); //获取当前日(1-31)
			    var hour = date.getHours(); //获取当前小时数(0-23)
			    var minute = date.getMinutes(); //获取当前分钟数(0-59)
			    var second = date.getSeconds(); //获取当前秒数(0-59)
			    var nowTime;
			    nowTime = year+'-'+this.fillZero(month)+'-'+this.fillZero(today)+' '+this.fillZero(hour)+':'+this.fillZero(minute)+':'+this.fillZero(second);
			    return nowTime;
			},
			//时间的为零操作
			fillZero(str){
			    var realNum;
			    if(str<10){
					realNum	= '0'+str;
			    }else{
					realNum	= str;
			    }
			        return realNum;
			}
		}
	}
</script>

<style>
	.subsection{
		position: fixed;
		top:41px;
		height:50px;
		background-color: #FFFFFF;
	}
	.province{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.yesCoupons{
		margin-top:50px;
		width:100%;
		height:100%;
		/* background-color: #EEEEEF; */
	}
	.noCoupons{
		margin-top:50px;
		width:100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.yesCoupons .yescoupon{
		margin:10px auto;
		width:92%;
		height:90px;
		border-radius:15px;
		background-color: #FFFFFF;
	}
	.yescoupon .Usercoupons{
		width:80%;
		padding-left:10px;
		line-height:30px;
		float:left;
	}
	.yescoupon .couponsCheck{
		width:10%;
		margin-top:34px;
		float: right;
	}
	.yescoupon .Usercoupons .couponName{
		margin-top:14px;
		font-size:18px;
		color: #1BBC9B;
	}
	.yescoupon .Usercoupons .couponEndDate{
		color: #999999;
	}
	.noCoupons .nocoupon{
		margin:10px auto;
		width:92%;
		height:90px;
		border-radius:15px;
		background-color: #F8F8F8;
	}
	.nocoupon .Usercoupons{
		width:80%;
		padding-left:10px;
		line-height:30px;
		float:left;
	}
	.nocoupon .couponsCheck{
		width:10%;
		margin-top:34px;
		float: right;
	}
	.nocoupon .Usercoupons .couponName{
		margin-top:14px;
		font-size:18px;
		color: #1BBC9B;
	}
	.nocoupon .Usercoupons .couponEndDate{
		color: #999999;
	}
	.box-floot .yesBtn{
		margin-top:5px;
		width:40%;
	}
	.box-floot .noBtn{
		margin-top:5px;
		width:40%;
	}
</style>
